<template>
  <a-row>
    <a-col :span="18">
      <div style="width: 100%; height: 100vh">
        <img src="../assets/Snipaste_2023-11-16_12-19-40.png" alt="login"/>
      </div>
    </a-col>
    <a-col :span="6">
      <a-card style="transform: translateY(200px)">
        <a-form
            :model="formState"
            name="basic"
            :label-col="{ span: 6 }"
            :wrapper-col="{ span: 16 }"
            autocomplete="off"
            @finish="onFinish"
            @finishFailed="onFinishFailed"
        >
          <a-form-item
              label="账号"
              name="userId"
              :rules="[{ required: true, message: '请输入账号!' }]"
          >
            <a-input v-model:value="formState.userId"/>
          </a-form-item>

          <a-form-item
              label="密码"
              name="passwd"
              :rules="[{ required: true, message: '请输入密码!' }]"
          >
            <a-input-password v-model:value="formState.passwd"/>
          </a-form-item>

          <a-form-item
              label="验证码"
              name="code"
              :rules="[{ required: true, message: '请输入验证码!' }]"
          >
            <a-row :gutter="10">
              <a-col :span="12">
                <a-input v-model:value="formState.code"/>
              </a-col>
              <a-col :span="12">
                <div style="width: 100%; height: 32px">
                  <img
                      style="border-radius: 4px; cursor: pointer"
                      @click="getImageCode"
                      :src="codeSrc"
                      alt="验证码"
                  />
                </div>
              </a-col>
            </a-row>
          </a-form-item>

          <a-form-item
              name="remember"
              label=" "
              :label-col="{ span: 6 }"
              :wrapper-col="{ span: 16 }"
          >
            <a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
          </a-form-item>

          <a-form-item
              label=" "
              :label-col="{ span: 6 }"
              :wrapper-col="{ span: 16 }"
          >
            <a-button style="width: 100%" type="primary" html-type="submit">
              登录
            </a-button>
          </a-form-item>
        </a-form>
      </a-card>
    </a-col>
  </a-row>
</template>
<script lang="ts" setup>
import {ref, reactive, onMounted} from "vue";
import router from "@/router";
import {message} from "ant-design-vue";
import api from "@/api";

const codeSrc = ref("");
onMounted(() => {
  getImageCode();
});
const getImageCode = () => {
  api.user.generateImageCode().then((res: any) => {
    const bufferUrl = btoa(
        new Uint8Array(res).reduce(
            (data, byte) => data + String.fromCharCode(byte),
            ""
        )
    );
    codeSrc.value = "data:image/png;base64," + bufferUrl;
  });
};

interface FormState {
  userId: string;
  passwd: string;
  code: string;
  remember: boolean;
}

const formState = reactive<FormState>({
  userId: "",
  passwd: "",
  code: "",
  remember: true,
});

const onFinish = (values: any) => {
  api.user.login(values).then((res: any) => {
    if (res.success) {
      message.success("登录成功");
      router.push("/home");
      setTimeout(() => {
        location.replace(location.href);
      }, 100)
    } else {
      message.error(res.message);
    }
    localStorage.setItem("LOGIN_USER", JSON.stringify(res.data));
    /* @ts-ignore */
    const login_user: any = JSON.parse(localStorage.getItem("LOGIN_USER"));
  });
};

const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
};
</script>

<style scoped>
:deep(label)::after {
  content: "" !important;
}
</style>
